/*
 * src/styles/_variables.scss
 * -----------------------------------------
 * 该文件是项目设计的唯一真实来源 (Single Source of Truth)。
 * 1. 定义项目所需的所有 SASS 变量。
 * 2. 通过 :root 将 SASS 变量转换为全局 CSS 变量，以便在 JS/TS 和模板中使用。
 */

//==============================================================================
// 1. SASS 变量定义区 (用于 SCSS 文件内部)
//==============================================================================

//--- Colors 颜色 ---
$sky-yellow: #f1e729;
$sky-blue: #06c0e5;

$color-success: #67c23a;
$color-warning: #e6a23c;
$color-danger: #f56c6c;
$color-info: #06c0e5;

$text-color-primary: #303133;
$text-color-regular: #606266;
$text-color-secondary: #909399;

$bg-color: #f4f4f5;
$bg-color-overlay: #ffffff;

//--- Sidebar 侧边栏 ---
$sidebar-width: 190px;
$sidebar-collapsed-width: 64px;
// $sidebar-bg: #343444; // 稍微调整了一下颜色，使其与你的截图更接近
$sidebar-bg: #2d2d3f; // 稍微调整了一下颜色，使其与你的截图更接近
$sidebar-text-color: #bfcbd9;
$sidebar-active-text-color: $sky-yellow;

//--- Layout 布局 ---
$navbar-height: 60px;
$base-padding: 20px;
$border-radius-base: 4px;

//==============================================================================
// 2. CSS 变量暴露区 (用于全局，包括 JS/TS 和模板)
//    - 使用 -- 开头
//    - 使用 #{$sass-variable} 语法进行插值
//==============================================================================

:root {
  // --- Colors ---
  --sky-color-primary: #{$sky-yellow};
  --sky-color-navbar: #{$sky-blue};

  --sky-color-success: #{$color-success};
  --sky-color-warning: #{$color-warning};
  --sky-color-danger: #{$color-danger};
  --sky-color-info: #{$color-info};

  --sky-text-color-primary: #{$text-color-primary};
  --sky-text-color-regular: #{$text-color-regular};
  --sky-text-color-secondary: #{$text-color-secondary};

  --sky-bg-color: #{$bg-color};
  --sky-bg-color-overlay: #{$bg-color-overlay};

  // --- Sidebar ---
  --sky-sidebar-width: #{$sidebar-width};
  --sky-sidebar-collapsed-width: #{$sidebar-collapsed-width};
  --sky-sidebar-bg: #{$sidebar-bg};
  --sky-sidebar-text-color: #{$sidebar-text-color};
  --sky-sidebar-active-text-color: #{$sidebar-active-text-color};

  // --- Layout ---
  --sky-navbar-height: #{$navbar-height};
  --sky-base-padding: #{$base-padding};
  --sky-border-radius-base: #{$border-radius-base};
}
